﻿@page "/application/chat"
@using AdminDashboard.Wasm.Models

<div class="d-flex flex-grow-1 flex-row">
    <MudHidden Breakpoint="Breakpoint.SmAndDown">
        <MudPaper Elevation="25" Class="pa-3 mr-6" MinWidth="250px">
            <MudButton EndIcon="@Icons.Material.Filled.Add" Color="Color.Secondary" FullWidth="true">Create Channel</MudButton>
            <ChatChannels />
        </MudPaper>
    </MudHidden>
    <MudPaper Elevation="25" Class="py-4 flex-grow-1">
        <MudToolBar Dense="true">
            <MudHidden Breakpoint="Breakpoint.MdAndUp">
                <MudIconButton OnClick="@(() => OpenDrawer(Anchor.Left))" Icon="@Icons.Material.Outlined.Menu" Color="Color.Inherit" Class="mr-2 ml-n2" />
            </MudHidden>
            <MudText Typo="Typo.h6" Inline="true" Class="mr-2">#</MudText>
            <MudText Typo="Typo.h6">chat</MudText>
            <MudToolBarSpacer />
            <MudIconButton Icon="@Icons.Material.Outlined.Notifications" />
            <MudIconButton Icon="@Icons.Material.Outlined.PushPin" />
            <MudHidden Breakpoint="Breakpoint.MdAndUp">
                <MudIconButton OnClick="@(() => OpenDrawer(Anchor.Right))" Icon="@Icons.Material.Outlined.PeopleAlt" Color="Color.Inherit" Class="ml-3" />
            </MudHidden>
        </MudToolBar>
        <div class="d-flex flex-column px-4" style="max-height:800px; overflow:scroll;">
            @foreach (var message in chatMessages)
            {
                <UserMessage UserName="@message.UserName" Message="@message.Message" ChatUser="@GetUser(message.UserName)" />
            }
        </div>
        <MudPaper Elevation="25" Class="d-flex flex-row px-2 mx-4" Style="background-color: var(--mud-palette-background-grey);">
            <MudIconButton Icon="@Icons.Material.Filled.AddCircle"></MudIconButton>
            <MudTextField T="string" Placeholder="Message #chat" DisableUnderLine="true" Class="mt-n2 mx-4"></MudTextField>
            <MudIconButton Icon="@IconGift"></MudIconButton>
            <MudIconButton Icon="@IconGif"></MudIconButton>
            <MudIconButton Icon="@Icons.Material.Outlined.Sick" Color="Color.Warning"></MudIconButton>
        </MudPaper>
    </MudPaper>
    <MudHidden Breakpoint="Breakpoint.SmAndDown">
        <MudPaper Elevation="25" Class="pa-3 pb-16 ml-6" MinWidth="250px">
            <ChatUsers chatUsers="chatUsers" />
        </MudPaper>
    </MudHidden>
</div>

<MudDrawer @bind-Open="@open" Anchor="@ChatDrawer" Elevation="1" Variant="@DrawerVariant.Temporary">
    @if (ChatDrawer == Anchor.Left)
    {
        <MudButton EndIcon="@Icons.Material.Filled.Add" Color="Color.Secondary" Class="mx-4 mt-6 mb-4">Create Channel</MudButton>
        <ChatChannels />
    }
    else if (ChatDrawer == Anchor.Right)
    {
        <div class="pa-3">
            <ChatUsers chatUsers="chatUsers" />
        </div>
    }
</MudDrawer>

@code
{
    bool open;
    Anchor ChatDrawer { get; set; }

    ChatUser[] chatUsers = new ChatUser[]
{
        new ChatUser { UserName = "Garderoben", UserRoleColor = Colors.DeepPurple.Accent4, OnlineStatus = Color.Success, Spotify = true, AvatarUrl = "https://avatars2.githubusercontent.com/u/10367109?s=460&amp;u=2abf95f9e01132e8e2915def42895ffe99c5d2c6&amp;v=4"},
        new ChatUser { UserName = "Henon", UserRoleColor = Colors.DeepPurple.Accent4, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/44090?s=460&v=4"},
        new ChatUser { UserName = "Flaflo", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Success, Spotify = true, AvatarUrl = "https://avatars.githubusercontent.com/u/12973684?s=460&u=ea557f04c5d9c54f902f8c700292baefe59217d0&v=4"},
        new ChatUser { UserName = "porkopek", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Warning, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/13745954?s=460&u=81ef9118f63113ad64bde35add178cbd9ca3bb38&v=4"},
        new ChatUser { UserName = "mike-gh", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Warning, Spotify = false, AvatarColor = Color.Success},
        new ChatUser { UserName = "tungi52", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Warning, Spotify = false, AvatarColor = Color.Success},
        new ChatUser { UserName = "svenovic", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Dark, Spotify = false, AvatarColor = Color.Success},
        new ChatUser { UserName = "Artroxa", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars2.githubusercontent.com/u/71094850?s=460&u=66c16f5bb7d27dc751f6759a82a3a070c8c7fe4b&v=4"},
        new ChatUser { UserName = "II ARROWS", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/14835013?s=460&u=8d9acfca411be6941ceb44f710c4357857350c2a&v=4"},
        new ChatUser { UserName = "rangsk", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/10701249?s=460&u=f806998af6e29fd4402736ba2efc2649adae9e39&v=4"},
        new ChatUser { UserName = "Svarta Änkan", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Error, Spotify = true, AvatarColor = Color.Error},
        new ChatUser { UserName = "TommyG", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Warning, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/4773183?s=460&u=7d0ebb28e29ae5103a74070471ffd506cdbf03fd&v=4"},
};

    ChatMessage[] chatMessages = new ChatMessage[]
    {
        new ChatMessage { UserName = "Garderoben", Message = "What is CSS?"},
        new ChatMessage { UserName = "Henon", Message = "idk?"},
        new ChatMessage { UserName = "Garderoben", Message = "me neither, anyone else?"},
        new ChatMessage { UserName = "Artroxa", Message = "lololololol"},
        new ChatMessage { UserName = "svenovic", Message = "Cascading Style Sheets"},
        new ChatMessage { UserName = "rangsk", Message = "CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML."},
        new ChatMessage { UserName = "II ARROWS", Message = "We're on a mission from Glod."},
        new ChatMessage { UserName = "TommyG", Message = "Wth dude, i love Terry Pratchett"},
        new ChatMessage { UserName = "tungi52", Message = "Did you guys read his discworld book series?"},
        new ChatMessage { UserName = "TommyG", Message = "Yeah! It's great!"},
        new ChatMessage { UserName = "Garderoben", Message = "no more talk about books, this is very serious coder chat!"},
        new ChatMessage { UserName = "Artroxa", Message = "Yes, blazor is cool coding for cool kids" },
        new ChatMessage { UserName = "Flaflo", Message = "@Garderoben hey have you even started working on issue #294 on git?"},
        new ChatMessage { UserName = "Henon", Message = "Don't worry Flaflo, i took care of it."},
    };

    public ChatUser GetUser(string username)
    {
        var chatUser = chatUsers.FirstOrDefault(x => x.UserName == username);
        return chatUser;
    }

    void OpenDrawer(Anchor anchor)
    {
        ChatDrawer = anchor;
        open = true;
    }

    public string IconGift { get; set; } = "<path d=\"M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z\" />";
    public string IconGif { get; set; } = "<path d=\"M11,8H13V16H11V8M7.67,8H4.33C3.53,8 3,8.67 3,9.33V14.67C3,15.33 3.53,16 4.33,16H7.67C8.47,16 9,15.33 9,14.67V12H7V14H5V10H9V9.33C9,8.67 8.47,8 7.67,8M21,10V8H15V16H17V14H19.5V12H17V10H21Z\" />";
}